<template>
    <div class="tree">
        <div class="searchBox">
            <el-input type="text"
                placeholder="输入机构、外包方、合同名称查询"
                v-model="searchKey"
                @select="onSearch"
                @change="onSearch"
            >
            <img src="@/assets/search.png" slot="suffix" @click="onSearch" />
            </el-input>
        </div>
        <!-- check-strictly 当勾选父级时是否默认勾选所有子级 -->
       <el-tree
       ref="tree"
       :data="treeData"
       :props="defaultProps"
       @node-click="handleNodeClick"
       lazy
       :load="loadNode"
       node-key="orgId"
       check-strictly
       highlight-current
       :expand-on-click-node="false"
       ></el-tree>
    </div>
</template>

<script>
import { getUuid } from '@/utils/common'
export default {
    data () {
        return {
            treeData: [], //树数据
            searchKey: '', //搜索关键字
            buttonType: 0, //当前选中按钮
            //树默认设置
            defaultProps: {
                label: 'orgName', //树展示的数据字段名
                children: 'children', //树子级点的数组名字
                isLeaf: 'leaf' //此属性用于设置节点是否为子节点
            },
            count: 1, //用于模拟后端数据格式
        }
    },
    mounted () {
        this.setTreeData()
    },
    methods: {
        // 模拟数据
        setTreeData () {
            const data = []
            for (let i = 1; i < 10; i++) {
                const obj = {
                    orgName: `第${i}条机构某某某有限责任公司第${i}分部`,
                    orgId: `${i}`,
                    uuid: getUuid(),
                    isDetailed: 0,
                    parentId: '0',
                    leaf: false
                }
                data.push(obj)
            }
            this.treeData = data
        },
        // 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
        handleNodeClick (data) {
            this.$emit('click', data)
        },
        // 懒加载事件
        loadNode (node, resolve) {
            const target = node.data
            //第一次页面加载也会执行这个方法,需要跳过第一次执行
            if(target instanceof Array) {
                return
            }
            //模拟后端isDetailed参数当isDetailed==1时说明当前选中数据是最子级
            const sonList = []
            if(target.isDetailed != 1) {
                //随机模拟子级数据
                const mathNum = parseInt(Math.random() * 10 + 1)
                // const mathNum = 30
                for (let i = 1; i <= mathNum; i++) {
                    const obj = {
                        orgName: `第${target.orgId}-${i}条机构`,
                        orgId: `${target.orgId}-${i}`,
                        uuid: getUuid(),
                        isDetailed: this.count >= 3 ? 1 : 0,
                        parentId: target.orgId,
                        leaf: this.count >= 3
                    }
                    sonList.push(obj)
                }
            }
            target.children = sonList
            setTimeout(() => {
                this.count += 1
                resolve(sonList)
            }, 500)
        },
        // 表格搜索
        onSearch () {

        },
    }
}
</script>

<style lang="scss" scoped>
    .menuBox {
        display: flex;
        justify-content: center;
        align-items: center;
        .meneBlankBox {
            flex: 4;
        }
        .meneContentBox {
            flex: 3;
            display: flex;
            justify-content: space-between;
            align-items: center;
                .buttonBox {
                height: 26px;
                background-color: #fff;
                color: #999999;
                border-radius: 3px;
                font-size: 12px;
                border: none;
                cursor:not-allowed;
                }
                .checkButton{
                     cursor:pointer;
                     color: #000;
                }
                .activeButton {
                    background-color: #2e61d7;
                    color: #fff;
                }
        }

    }
    .searchBox {
        margin: 5px 0;
    }
    ::v-deep.el-tree-node__children {
        .el-tree-node {
            .el-tree-node__content {
                .is-leaf + .el-checkbox {
                    display: none;
                }
            }
        }
    }
</style>